<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务计划列表</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100vw;
        }

        main {
            width: 100vw;
            background-color: #f5f5f5;
            height: 100vh;

            header {
                height: 60px;
                background-color: red;

                h1 {
                    display: flex;
                    justify-content: center;
                    color: white;
                }
            }

            section {
                width: 1000px;
                margin: 0 auto;

                .input {
                    width: 50vw;
                    padding: 10px;
                    margin-bottom: 10px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                }
            }

            footer {
                width: 1000px;
                margin: 0 auto;

                ul {
                    padding-left: 0px;

                    li {
                        list-style: none;
                        height: 30px;
                        background-color: white;
                        margin-top: 20px;
                        display: flex;
                        align-items: center;
                        position: relative;

                        .delete-btn {
                            display: none;
                            position: absolute;
                            right: 10px;
                            top: 5px;
                        }

                        &:hover .delete-btn {
                            display: block;
                        }

                        .completed {
                            text-decoration: line-through;
                            color: gray;
                        }
                    }
                }
            }
        }
    </style>
</head>

<body>
    <main>
        <header>
            <h1>任务计划列表</h1>
        </header>
        <section>
            <p>
                <input type="text" id="MemoInput" class="input" placeholder="例如:吃饭睡觉打豆豆" />
                <button id="add">添加</button>
            </p>
            <p>
                <label id="incomplete">未完成任务: 0</label>
            </p>
            <div>
                <button onclick="btn('all')">所有任务</button>
                <button onclick="btn('incomplete')">未完成的任务</button>
                <button onclick="btn('completed')">完成的任务</button>
            </div>
        </section>
        <footer>
            <h4>任务列表:</h4>
            <ul id="List" class="List"></ul>
        </footer>
    </main>
    <script>
        // 尝试从浏览器的本地存储中获取名为 'Memo' 的数据。如果不存在，就使用默认的任务列表
        // JSON.parse() 将存储的字符串转换为JavaScript对象
        var obj = JSON.parse(localStorage.getItem('Memo')) || [
            { text: '第三方斯蒂芬', completed: false },
            { text: '大范甘迪发广告', completed: false },
            { text: '电饭锅回复', completed: true }
        ];
        // save 函数用于将当前的任务数组 obj 转换为JSON字符串，并保存到本地存储中
        function save() {
            localStorage.setItem('Memo', JSON.stringify(obj));
        }
        // load 函数调用 btn('all') 函数，用于在页面加载时显示所有任务
        function load() {
            btn('all');
        }
        // 新增
        document.querySelector('#add').addEventListener('click', function addMemo() {
            var input = document.querySelector('#MemoInput');
            var MemoValue = input.value;
            if (MemoValue) {
                obj.push({
                    text: MemoValue,
                    completed: false
                });
                // 清空输入框
                input.value = '';
                // 保存更新后的任务列表
                save();
                // 刷新显示所有任务
                btn('all');
                // 如果为空
            } else {
                alert('请输入任务内容');
            }
        });
        //切换对应数据的 completed 状态
        function updateCompletion(MemoId) {
            var Memo = obj[MemoId];
            Memo.completed = !Memo.completed;
            save();
            btn('all');
        }
        //从 obj 数组中删除对应的数据
        function deleteMemo(MemoId) {
            obj.splice(MemoId, 1);
            save();
            btn('all');
        }

        function btn(filter) {
            // 获取任务列表
            var List = document.querySelector('#List');
            // 清空任务列表
            List.innerHTML = '';
            // 初始化一个变量，用来计数
            var num = 0;
            // Memo 是当前遍历到的任务对象，i 是任务在数组中的索引。
            obj.forEach((Memo, i) => {
                // 根据 filter 判断显示哪一个
                if (filter === 'all' || (filter === 'incomplete' && !Memo.completed) || (filter === 'completed' && Memo.completed)) {
                    // 改变复选框状态
                    var completed = Memo.completed ? 'checked' : '';
                    // 添加任务列表内容
                    List.innerHTML += `
                        <li id='li${i}'>
                            <input type="checkbox" id='checkbox${i}' ${completed} onclick="updateCompletion(${i})">
                            <label for='checkbox${i}' class="${Memo.completed ? 'completed' : ''}">${Memo.text}</label>
                            <button class="delete-btn" onclick="deleteMemo(${i})">删除</button>
                        </li>
                    `;
                }
                // 如果没有选中复选框，未完成任务+1
                if (!Memo.completed) {
                    num++;
                }
            });
            // 未完成任务的个数
            document.getElementById('incomplete').textContent = '未完成任务: ' + num;
        }

        window.onload = load;
    </script>
</body>

</html>